<ti-halfmodal #modal id="halfmodal-content" [backdrop]="true">
  <ti-halfmodal-header>配置</ti-halfmodal-header>
  <ti-halfmodal-body>
    <ti-formfield>
      <ti-item [label]="item1.label" [required]="item1.required" [show]="item1.show">
        <input type="text" tiText style="width: 200px" [(ngModel)]="item1.value" />
      </ti-item>
      <ti-item [label]="item2.label" [required]="item2.required">
        <input type="text" tiText style="width: 200px" [(ngModel)]="item2.value" />
      </ti-item>
      <ti-item [required]="item3.required" [show]="item3.show" [label]="item3.label" [verticalAlign]="item3.verticalAlign">
        <span>item3</span>
      </ti-item>
      <ti-item [required]="item4.required" [label]="item4.label" [verticalAlign]="item4.verticalAlign">
        <ti-item-label>
          <span>测试标签dom</span>
        </ti-item-label>
        <span *ngFor="let item of [1, 2, 3]">{{item}}</span>
      </ti-item>
      <ti-item [required]="item5.required" [show]="item5.show" [verticalAlign]="item5.verticalAlign">
        <ti-item-label>
          <span>存储地址:</span>
        </ti-item-label>
        <textarea tiTextarea></textarea>
      </ti-item>
      <ti-item [required]="item6.required" [show]="item6.show" [verticalAlign]="item6.verticalAlign">
        <ti-item-label>
          <span>性别:</span>
        </ti-item-label>
        <div *ngFor="let item of item6.radioList" style="display: inline-block; margin-right: 20px">
          <input type="radio" tiRadio name="group" [(ngModel)]="item6.checked" [value]="item.id" [label]="item.key" />
        </div>
      </ti-item>
      <ti-item [label]="'表格'">
        <ti-table [(displayedData)]="displayed" [srcData]="srcData">
          <table>
            <thead>
              <tr>
                <th tiOverflow *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let row of displayed;index as i;trackBy: trackByFn">
                <td tiOverflow>{{row.firstName}}</td>
                <td tiOverflow>{{row.lastName}}</td>
                <td tiOverflow>{{row.age}}</td>
                <td tiOverflow>{{row.balance}}</td>
                <td tiOverflow>{{row.email}}</td>
              </tr>
            </tbody>
          </table>
        </ti-table>
      </ti-item>
    </ti-formfield>
  </ti-halfmodal-body>
  <ti-halfmodal-footer>
    <button style="margin-right: 8px" id="halfmodal-content-ok" tiButton color="danger" (click)="close()">确定</button>
    <button id="halfmodal-content-cancel" tiButton (click)="dismiss()">取消</button>
  </ti-halfmodal-footer>
</ti-halfmodal>
<button id="halfmodal-content-show" tiButton (click)="show()">打开半屏弹窗</button>
